<template>
  <div
      class="primary"
  >
    <div
        class="thermometer"
    >
      <div
          class="trunk"
          :style="{
          boxShadow: `inset 0 ${trunkShadowSize.toFixed(0)}px 0 0.01px #fff`,
          height: `${(temperatureHeight + borderWidth).toFixed(0)}px`,
          borderWidth: `${borderWidth.toFixed(0)}px`,
          borderBottom: '0px',
        }"
      />
      <div class="bottom" />
    </div>
    <div
        class="temperature-num"
        :style="{
        backgroundPosition:` bottom -${(temperatureHeight - trunkShadowSize).toFixed(0)}px center`,
        backgroundSize: `100% ${(temperatureHeight + fontSize + 2).toFixed(0)}px`,
        fontSize: `${fontSize.toFixed(0)}px`
      }"
    >
      {{ temperature.toFixed(fractionDigits) }} {{ unit }}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Thermometer',
    props: {
      temperature: {
        type: Number,
        default: 60 // -30 ~ 70
      },
      size: {
        type: Number,
        default: 1
      },
      minTemperature: {
        type: Number,
        default: -30 // -30 ~ 70
      },
      maxTemperature: {
        type: Number,
        default: 70 // -30 ~ 70
      },
      temperatureHeight: {
        type: Number,
        default: 60
      },
      fontSize: {
        type: Number,
        default: 14
      },
      borderWidth: {
        type: Number,
        default: 4
      },
      fractionDigits: {
        type: Number,
        default: 0
      },
      unit: {
        type: String,
        default: '℃'
      }
    },
    computed: {
      trunkShadowSize() {
        const temperaRange = this.maxTemperature - this.minTemperature
        let temperature = this.temperature
        if (temperature < this.minTemperature) {
          temperature = this.minTemperature
        } else if (temperature > this.maxTemperature) {
          temperature = this.maxTemperature
        }
        const p = ((temperature - this.minTemperature) / temperaRange) * this.temperatureHeight // 转换到 0 到 this.temperatureHeight
        return p > this.temperatureHeight ? 0 : this.temperatureHeight - p
      }
    }
  }
</script>

<style lang='less' scoped>
  @max-width: 30px;
  @hot-color: red;
  @mid-color: #ffa200;
  @cool-color: #3ec9db;
  @border-color: #256190;
  @border-width: 3px;
  .primary {
    text-align: center;
    margin: 0 auto;
  }
  .thermometer {
    width: @max-width;
    text-align: center;
    display: inline-block;
    transform-origin: top center;
    .trunk {
      display: inline-block;
      width: @max-width / 2;
      border-radius: 8px 8px 0 0 ;
      border-style: solid;
      border-color: @border-color;
      transform: translateY(9px);
      background: linear-gradient(@hot-color, @mid-color , @cool-color) no-repeat bottom center;
      transition: box-shadow 0.3s;
    }
    .bottom {
      width: @max-width;
      height: @max-width;
      border-radius: 100%;
      border: @border-width solid @border-color;
      background: @cool-color;
    }
  }
  .temperature-num {
    font-weight: bold;
    background-image: -webkit-linear-gradient(@hot-color, @mid-color ,@cool-color);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 5px;
  }
</style>
